<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *, *:before, *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .popover {
            position: absolute;
            /*top: 0;*/
            /*left: 0;*/
            z-index: 1010;
            /*display: none;*/
            max-width: 276px;
            padding: 1px;
            text-align: left;
            white-space: normal;
            background-color: #fff;
            /*border: 1px solid #ccc;*/
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: 6px;
            -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
            background-clip: padding-box;
        }
        .fade {
            /*opacity: 0;*/
            -webkit-transition: opacity .15s linear;
            transition: opacity .15s linear;
        }

        .popover-header {
            padding: 8px 14px;
            background-color: #f7f7f7;
            border-bottom: 1px solid #ebebeb;
            -webkit-border-radius: 5px 5px 0 0;
            -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
        }
        .popover-title {
            /*padding: 8px 14px;*/
            /*margin: 0;*/
            font-size: 14px;
            font-weight: normal;
            line-height: 18px;
            /*background-color: #f7f7f7;*/
            /*border-bottom: 1px solid #ebebeb;*/
            border-radius: 5px 5px 0 0;
        }
        .popover-title {
            margin: 0;
            padding: 0;
            background-color: transparent;
            border: none;
        }
        .popover-content {
            padding: 9px 14px;
            text-align: center;
        }



        .popover .arrow {
            border-width: 11px;
        }
        .popover .arrow:after {
            border-width: 10px;
            content: "";
        }
        .popover.bottom .arrow {
            top: -11px;
            left: 50%;
            margin-left: -11px;
            border-bottom-color: #999;
            border-bottom-color: rgba(0,0,0,0.25);
            border-top-width: 0;
        }
        .popover.bottom .arrow:after {
            top: 1px;
            margin-left: -10px;
            border-bottom-color: #fff;
            border-top-width: 0;
            content: "";
        }
        .popover.top .arrow {
            bottom: -11px;
            left: 50%;
            margin-left: -11px;
            border-top-color: #999;
            border-top-color: rgba(0,0,0,0.25);
            border-bottom-width: 0;
        }
        .popover.top .arrow::after {
            bottom: 1px;
            margin-left: -10px;
            border-top-color: #fff;
            border-bottom-width: 0;
            content: "";
        }
        .popover .arrow, .popover .arrow:after {
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
        }



    </style>
</head>
<body>




<div class="popover fade bottom in" style="top: 220.8px; left: 10px; display: block; width: 200px;height:90px">
    <div class="arrow"></div>
    <div class="popover-header">
        <h3 class="popover-title">提示</h3>
    </div>
    <div class="popover-content">开始申请</div>
</div>

<div class="popover fade top in" style="top: 27.6px; left: 10px; display: block;width: 200px;height:90px"><div class="arrow"></div>
    <div class="popover-header">
        <h3 class="popover-title">提示</h3></div>
        <div class="popover-content">开始申请</div>
</div>

</body>
</html>